<template>
  <div class="Teleplay">
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img
            src="//liangcang-material.alicdn.com/prod/upload/66233e31a4dd494fbcf353fc8492aafb.jpg?x-oss-process=image/resize,w_1243/format,webp/interlace,1"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="//liangcang-material.alicdn.com/prod/upload/97511dea2b8d48798610c6de116c652f.jpg?x-oss-process=image/resize,w_1243/format,webp/interlace,1"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="//liangcang-material.alicdn.com/prod/upload/447d9ab6d994437c8a8174c5fd16b559.jpg?x-oss-process=image/resize,w_1243/format,webp/interlace,1"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="//liangcang-material.alicdn.com/prod/upload/aad92241be3646cca0cd3062144394b0.jpg?x-oss-process=image/resize,w_1243/format,webp/interlace,1"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="btn">
      <img
        src="https://ykimg.alicdn.com/develop/image/2020-12-17/c9d83e11cb40c71503c2d6033bca270a.jpg"
        alt=""
      />
    </div>
    <div class="con">
      <h3>最新热剧</h3>
      <ul class="con-list">
        <li v-for="(item, index) in arr" :key="index">
          <img :src="item.imgSrc" alt="" />
          <p>{{ item.name }}</p>
          <p class="p1">{{ item.title }}</p>
        </li>
      </ul>
      <div class="con-btn">
        <p>换一换</p>
        <img
          src="https://img.alicdn.com/tfs/TB1nF9mkbY1gK0jSZTEXXXDQVXa-24-24.png"
          alt=""
        />
      </div>
    </div>
    <div class="con">
      <h3>独家剧有料</h3>
      <div class="con1-b">
        <img
          src="//liangcang-material.alicdn.com/prod/upload/67b23e173337406c81c9fa55ce607f7d.jpg?x-oss-process=image/resize,w_1243/format,webp/interlace,1"
          alt=""
        />
        <p class="con1-p">乡村爱情14>1月24日18点爆笑开播</p>
        <p class="con1-p1">刘能回归！象牙山三巨头嗨翻虎年</p>
      </div>
      <ul class="con-list">
        <li v-for="(item, index) in arr" :key="index">
          <img :src="item.imgSrc" alt="" />
          <p>{{ item.name }}</p>
          <p class="p1">{{ item.title }}</p>
        </li>
      </ul>
      <div class="con-btn">
        <p>换一换</p>
        <img
          src="https://img.alicdn.com/tfs/TB1nF9mkbY1gK0jSZTEXXXDQVXa-24-24.png"
          alt=""
        />
      </div>
    </div>
    <div class="con">
      <h3>港剧场</h3>
      <div class="con1-b">
        <img
          src="//liangcang-material.alicdn.com/prod/upload/bd9dd4196d5247e4910285ee9e3a2545.jpg?x-oss-process=image/resize,w_1243/format,webp/interlace,1"
          alt=""
        />
        <p class="con1-p">无罪推定</p>
        <p class="con1-p1">梁汉文王敏奕陷性骚扰疑云</p>
      </div>
    </div>
    <div class="con">
      <h3>海外剧场</h3>
      <div class="con1-b">
        <img
          src="//liangcang-material.alicdn.com/prod/upload/5e55a41f122b48d38cd77d6f63d3596f.gif?x-oss-process=image/resize,w_1243/format,webp/interlace,1"
          alt=""
        />
        <p class="con1-p">奇幻爱恋💕重启恋的世界>一口气看18集</p>
        <p class="con1-p1">破次元！霸道总裁爱上穿越少女</p>
      </div>
    </div>
    <div class="foot">
        <p>Copyright©2019 优酷 youku.com 版权所有</p>
        <p class="foot-p1">京ICP备06050721号-1</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "Teleplay",
  data() {
    return {
      arr: [
        {
          imgSrc:
            "//liangcang-material.alicdn.com/prod/upload/efdd84f7e2a947698d2d3453507ca2d6.gif",
          name: "家族荣耀",
          title: "塑料姐妹夺家产",
        },
        {
          imgSrc:
            "//liangcang-material.alicdn.com/prod/upload/2d3e298085bc4131a21e276ae1f37f77.jpg",
          name: "镜·双城",
          title: "李易峰绝美仙恋",
        },
        {
          imgSrc:
            "//liangcang-material.alicdn.com/prod/upload/572a275d928f4321a3331ac5ef72b2b1.jpg",
          name: "致命主妇",
          title: "主妇手撕渣男小三",
        },
        {
          imgSrc:
            "//liangcang-material.alicdn.com/prod/upload/b259113f7b1f42849fc8eee7e9e4b63a.jpg",
          name: "超越",
          title: "然魂逐梦无悔前行",
        },
        {
          imgSrc:
            "//liangcang-material.alicdn.com/prod/upload/e0bc6722f710489fa6795a90246a327e.webp.png",
          name: "勇敢的心2",
          title: "戏骨集结热血抗战",
        },
        {
          imgSrc: "https://m.ykimg.com/0584000061B303A113EB66095FAAA6A8",
          name: "小敏家 TV版",
          title: "周迅黄磊中年爱情",
        },
      ],
    };
  },
};
</script>
<style scoped>
.Teleplay {
  margin-top: 2.2rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
}
.van-swipe-item img {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.btn img {
  width: 100%;
  height: 100%;
}
.con h3 {
  margin-left: 0.1rem;
}
.con-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 0.1rem;
}
.con-list li img {
  width: 2.45rem;
  height: 3.5rem;
}
.con-list li p {
  padding-left: 0.09rem;
  font-size: 0.14rem;
  margin-top: 0.1rem;
  box-sizing: border-box;
}
.con-list li .p1 {
  color: #999;
}
.con-btn {
  width: 7rem;
  background: #f5f5f5;
  height: 0.8rem;
  line-height: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.2rem;
  margin: 0.2rem auto;
}
.con-btn p {
  font-size: 0.14rem;
  margin-right: 0.05rem;
}
.con-btn img {
  display: inline-block;
  width: 0.24rem;
  height: 0.24rem;
}
.con1-b img {
  width: 100%;
  height: 100%;
  margin-top: 0.1rem;
}
.con1-b .con1-p {
  padding-left: 0.09rem;
  font-size: 0.14rem;
  margin-top: 0.2rem;
  box-sizing: border-box;
}
.con1-b .con1-p1 {
  padding-left: 0.09rem;
  box-sizing: border-box;
  font-size: 0.14rem;
  color: #999;
  margin-top: 0.15rem;
}
.foot{
    text-align: center;
    margin-top: .1rem;
    font-size: .14rem;
}
.foot-p1{
    color: #999;
}
</style>